import { Tabbar, TabbarItem } from 'vant';
<template>
    <div >
      <div class="Bj">
        <div class="Dl">
          <img src="../assets/logo.png" alt="" > 
            登录/注册 >
        </div>
        <div class="center-zl">
          <van-icon class="Sz" name="friends-o" size="35"  @click="as"/>
        </div>  
      </div>
      <div class="">
        <van-tabbar v-model="active" class="Xx">
          <van-tabbar-item name="home" icon="notes-o" @click="dd">我的订单</van-tabbar-item>
          <van-tabbar-item name="search" icon="balance-pay" @click="yhj">优惠券</van-tabbar-item>
          <van-tabbar-item name="friends" icon="gem-o" @click="hy">会员中心</van-tabbar-item>
          <van-tabbar-item name="setting" icon="service-o">联系客服</van-tabbar-item>
        </van-tabbar>
      </div>
        <my-nav></my-nav>
        <my-footer></my-footer>
        
    </div>
    
</template>
<script>

  export default {
  data() {
    return {
      active: 'home',
    };
  },
  methods:{
    as(){
      self.location.href="/ziliao"
    },
    dd(){
      self.location.href="/dingdan"
    },
    yhj(){
      self.location.href="/youhj"
    },
    hy(){
      self.location.href="/huiyuan"
    },
  }
};

</script>
<style scoped>
  .center-zl{
    position: absolute;
    top:5vh
  }
  img{
    width: 7vh;
  }
  .Sz {
    position: static;
    margin-top: -90vh;
    margin-left: 50vh;
    color:rgb(248, 248, 251);
  }
  .Bj {
    width: 100%;
    height: 25vh;
    background-color: rgb(48, 130, 236);
    border: 1px solid beige;
  }
  .Xx {
    width: 100%;
    height: 10vh;
    border: 1px solid beige;
    position: static;
  }
  .Dl{
    color:white;
    font-size: 24px;
    margin-top: 12vh;
    margin-right: 20vh;

  }
</style>